<template lang="html">
    <div class="box" v-loading="loading">



          <div class="body">
            <div class="summary_left">
                <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
                    <el-form-item label="时间段" style="margin-bottom: 0;width: 520px;">
                      <el-date-picker v-model="intervalTime" type="daterange" align="right" unlink-panels range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期" @change="onchange" style="width: 100%;"
                        value-format="yyyy-MM-dd HH:mm:ss" >
                      </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>

                <div id="echart_canvas" style="width: 100%;height:600px;margin:0 auto;clear: both;"></div>
          </div>

          <p class="summary">{{tableData.total}}</p>

    </div>
</template>

<script>
export default {
  data () {
    return {
      token: this.$store.state.user.token3,
      tableData: [],
      intervalTime: [],
      loading: false
    }
  },
  created () {
    this.switchTab()
  },

  methods: {
    initSetData () {
      this.tableData = []
      this.intervalTime = []
    },
    onchange () {
      this.switchTab()
    },
    switchTab () {

      this.loading = true
      var jsonData = {
        token: this.token,
        start_time: (this.intervalTime && this.intervalTime[0]) || '',
        end_time: (this.intervalTime && this.intervalTime[1]) || '',
      }
      this.$http3.gatherExpend(jsonData)
        .then(this.resultFn())

    },
    resultFn () {
      return function (res) {
        this.loading = false
        if (res) {
          this.tableData =
            res.data.code === 1 ?
              this.tableData = res.data.data : [];

          this.renderEcharts(this.tableData)
        }
      }.bind(this)
    },
    renderEcharts (data) {

      var option2 = {
        color: ['#3398DB'],
        title: {
          text: '数据统计',
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },

        grid: {
          left: '3%',

          bottom: '5%',
        },
        xAxis: [
          {
            type: 'category',
            'axisLabel': { 'interval': 0 },
            'data': [
              { value: '车主停驶奖励', textStyle: { fontStyle: "italic" } },
              { value: '车主分享', textStyle: { fontStyle: "italic" } },
              { value: '车主推荐', textStyle: { fontStyle: "italic" } },
              { value: '油站交易', textStyle: { fontStyle: "italic" } },
              { value: '技师服务费', textStyle: { fontStyle: "italic" } },
              { value: '维修厂售卡奖励', textStyle: { fontStyle: "italic" } },
              { value: '维修厂推荐奖励', textStyle: { fontStyle: "italic" } },
              { value: '维修厂工时费', textStyle: { fontStyle: "italic" } },
              { value: '维修厂滤芯补助', textStyle: { fontStyle: "italic" } },
              { value: '运营商售卡收入', textStyle: { fontStyle: "italic" } },
              { value: '运营商推荐奖励', textStyle: { fontStyle: "italic" } },
              { value: '供应商邦保盒子', textStyle: { fontStyle: "italic" } },
              { value: '供应商油品结算', textStyle: { fontStyle: "italic" } },
              { value: '供应商养护品结算', textStyle: { fontStyle: "italic" } }
            ],
            splitLine: { show: false },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '（元）'
          }
        ],
        series: [
          {
            name: '总支出',
            type: 'bar',
            barWidth: '50%',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: [
              data.expend.userLayOff,
              data.expend.userShare,
              data.expend.userRecom,
              data.expend.oilService,
              data.expend.workerService,
              data.expend.shopCardInc,
              data.expend.shopRecom,
              data.expend.shopHourFee,
              data.expend.shopFilter,
              data.expend.agentCardInc,
              data.expend.agentRecom,
              data.expend.smObdInc,
              data.expend.smOilInc,
              data.expend.smFreeInc,
            ]
          }
        ]

      }
      var myChart = this.$echarts.init(document.getElementById('echart_canvas'));
      myChart.setOption(option2);
      window.addEventListener('resize', (() => {
        myChart.resize()
      }))
    },

  }
}
</script>

<style lang="css" scoped>
@import "../../../my-style/app.css";
.summary {
  float: right;
  margin: 10px 0;
  font-size: 16px;
}
.summary_left {
  float: left;
  z-index: 9;
  position: relative;
}
</style>
